import Vue from 'vue'

import Cookies from 'js-cookie'

import 'normalize.css/normalize.css' // a modern alternative to CSS resets

import Element from 'element-ui'
import '@/styles/element-variables.scss'

import '@/styles/index.scss' // global css

import App from '@/App'
import store from '@/store'
import router from '@/router'

import '@/icons' // icon
import '@/permission' // permission control
import '@/utils/error-log' // error log
import '@/register-components'
import * as filters from '@/filters' // global filters
import 'view-design/dist/styles/iview.css'
import publicfunc from '@/utils/publicfunc'

import permission from '@/directive/permission/index'
import tableCompont from '@/components/tableCompont'
import { Anchor, AnchorLink, Affix } from 'view-design'
import appStore from '@/utils/app-store' // qiankun通信组件

// Vue.use(permission)
/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */

// Vue.use(Element, {
//   size: Cookies.get('size') || 'small' // set element-ui default size
// })

// Element.Dialog.props.closeOnClickModal.default = false
// // register global utility filters
// Object.keys(filters).forEach(key => {
//   Vue.filter(key, filters[key])
// })
// import { Anchor, AnchorLink, Affix } from 'view-design'
// Vue.component('Anchor', Anchor)
// Vue.component('Affix', Affix)
// Vue.component('AnchorLink', AnchorLink)
// Vue.component('tableCompont', tableCompont)
// Vue.use(publicfunc)
// Vue.config.productionTip = false

// const VueObj = new Vue({
//   el: '#app',
//   router,
//   store,
//   render: h => h(App)
// })

// export default VueObj

// 生命周期
let instance = null

const lifeCycle = () => {
  return {
    async bootstrap(props) {
      console.log('props:', props)
    },
    async mount(props) {
      // appStore(props)
      render(props)
    },
    async unmount() {
      instance.$destroy()
      instance = null
      // router = null;
    },
    async update(props) {
      console.log('update props', props)
    }
  }
}

// 渲染
const render = ({ routes, routerBase, container } = {}) => {
  Vue.use(permission)
  Vue.use(Element, {
    size: Cookies.get('size') || 'small' // set element-ui default size
  })

  Element.Dialog.props.closeOnClickModal.default = false
  // register global utility filters
  Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key])
  })

  Vue.component('Anchor', Anchor)
  Vue.component('Affix', Affix)
  Vue.component('AnchorLink', AnchorLink)
  Vue.component('tableCompont', tableCompont)
  Vue.use(publicfunc)
  Vue.config.productionTip = false

  instance = new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount(container ? container.querySelector('#app') : '#app')

  // export default instance
}

export { lifeCycle, render }
